<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布签到任务（含地址）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            display: flex;
            justify-content: center;
            padding: 20px 0;
        }
        
        .container {
            width: 750px;
            background-color: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        
        .header {
            background-color: #2196F3;
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
        }
        
        .header h1 {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .header p {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .back-btn {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            text-decoration: none;
            font-size: 18px;
        }
        
        .content {
            padding: 25px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: #333;
            font-size: 16px;
        }
        
        .form-label span {
            color: #f44336;
        }
        
        .form-input {
            width: 100%;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s;
        }
        
        .form-input:focus {
            border-color: #2196F3;
            outline: none;
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
        }
        
        textarea.form-input {
            min-height: 100px;
            resize: vertical;
        }
        
        .form-hint {
            font-size: 13px;
            color: #666;
            margin-top: 5px;
        }
        
        .date-time-group {
            display: flex;
            gap: 15px;
        }
        
        .date-time-group .form-group {
            flex: 1;
        }
        
        .reward-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .reward-group input {
            flex: 1;
        }
        
        .reward-group select {
            width: 100px;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 15px;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .checkbox-group input {
            margin-right: 10px;
            width: 18px;
            height: 18px;
        }
        
        .submit-btn {
            width: 100%;
            padding: 16px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 20px;
        }
        
        .submit-btn:hover {
            background-color: #1976D2;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin: 25px 0 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
            color: #2196F3;
        }
        
        .address-container {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
        }
        
        .map-preview {
            height: 150px;
            background-color: #f5f5f5;
            border-radius: 6px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            position: relative;
            overflow: hidden;
        }
        
        .map-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .location-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            margin-top: 10px;
        }
        
        .location-btn i {
            margin-right: 5px;
        }
        
        @media (max-width: 768px) {
            .container {
                width: 100%;
                border-radius: 0;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <a href="#" class="back-btn"><i class="fas fa-arrow-left"></i></a>
            <h1>发布签到任务</h1>
            <p>创建带位置签到的活动</p>
        </div>
        
        <div class="content">
            <form id="checkin-form">
                <div class="form-group">
                    <label class="form-label">任务标题 <span>*</span></label>
                    <input type="text" class="form-input" placeholder="例如：每日健康打卡" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">任务描述</label>
                    <textarea class="form-input" placeholder="描述签到任务的具体内容和要求..."></textarea>
                    <p class="form-hint">建议详细说明签到规则和要求</p>
                </div>
                
                <div class="section-title">时间设置</div>
                
                <div class="date-time-group">
                    <div class="form-group">
                        <label class="form-label">开始日期 <span>*</span></label>
                        <input type="date" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">结束日期</label>
                        <input type="date" class="form-input">
                        <p class="form-hint">留空表示长期有效</p>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">每日签到时间段 <span>*</span></label>
                    <div class="date-time-group">
                        <input type="time" class="form-input" placeholder="开始时间" required>
                        <input type="time" class="form-input" placeholder="结束时间" required>
                    </div>
                </div>
                
                <div class="section-title">签到地址设置</div>
                
                <div class="form-group">
                    <label class="form-label">签到位置 <span>*</span></label>
                    <input type="text" class="form-input" id="address-input" placeholder="输入或选择签到地点" required>
                    <button type="button" class="location-btn" id="select-location">
                        <i class="fas fa-map-marker-alt"></i> 选择位置
                    </button>
                    
                    <div class="address-container" id="address-details" style="display: none;">
                        <div class="form-group">
                            <label class="form-label">详细地址</label>
                            <input type="text" class="form-input" id="detail-address" readonly>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">位置坐标</label>
                            <div class="date-time-group">
                                <input type="text" class="form-input" id="latitude" placeholder="纬度" readonly>
                                <input type="text" class="form-input" id="longitude" placeholder="经度" readonly>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">位置预览</label>
                            <div class="map-preview" id="map-preview">
                                <span>位置地图预览</span>
                                <!-- 实际项目中这里会嵌入地图 -->
                                <img src="https://maps.googleapis.com/maps/api/staticmap?center=39.9042,116.4074&zoom=15&size=600x300&maptype=roadmap&markers=color:red%7C39.9042,116.4074&key=YOUR_API_KEY" alt="地图预览" id="static-map" style="display: none;">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">签到范围（米）</label>
                            <input type="number" class="form-input" id="checkin-range" value="100" min="10">
                            <p class="form-hint">设置允许签到的最大距离范围</p>
                        </div>
                    </div>
                </div>
                
                <div class="section-title">奖励设置</div>
                
                <div class="form-group">
                    <label class="form-label">签到奖励</label>
                    <div class="reward-group">
                        <input type="number" class="form-input" placeholder="奖励数值" min="0">
                        <select class="form-input">
                            <option>积分</option>
                            <option>金币</option>
                            <option>经验值</option>
                            <option>现金(元)</option>
                        </select>
                    </div>
                    <p class="form-hint">每次签到成功后可获得的奖励</p>
                </div>
                
                <div class="form-group">
                    <label class="form-label">连续签到额外奖励</label>
                    <div class="checkbox-group">
                        <input type="checkbox" id="extra-reward">
                        <label for="extra-reward">启用连续签到奖励</label>
                    </div>
                    <p class="form-hint">设置连续签到3天、7天等额外奖励</p>
                </div>
                
                <button type="submit" class="submit-btn">发布签到任务</button>
            </form>
        </div>
    </div>

    <script>
        document.getElementById('checkin-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 验证位置是否已选择
            const addressInput = document.getElementById('address-input');
            if (!addressInput.value) {
                alert('请选择签到位置');
                return;
            }
            
            // 收集表单数据
            const formData = {
                title: this.querySelector('[type="text"]').value,
                description: this.querySelector('textarea').value,
                startDate: this.querySelector('[type="date"]').value,
                endDate: this.querySelectorAll('[type="date"]')[1].value,
                startTime: this.querySelectorAll('[type="time"]')[0].value,
                endTime: this.querySelectorAll('[type="time"]')[1].value,
                address: {
                    name: addressInput.value,
                    detail: document.getElementById('detail-address').value,
                    lat: document.getElementById('latitude').value,
                    lng: document.getElementById('longitude').value,
                    range: document.getElementById('checkin-range').value
                },
                reward: {
                    amount: this.querySelector('[type="number"]').value,
                    unit: this.querySelector('select').value
                },
                extraReward: document.getElementById('extra-reward').checked
            };
            
            console.log('提交数据:', formData);
            alert('签到任务发布成功！');
            // 实际项目中这里发送AJAX请求
        });
        
        // 模拟位置选择功能
        document.getElementById('select-location').addEventListener('click', function() {
            // 实际项目中这里会调用地图API
            const mockAddress = "北京市朝阳区望京SOHO";
            const mockDetail = "北京市朝阳区望京SOHO T3写字楼";
            const mockLat = "39.992894";
            const mockLng = "116.480972";
            
            document.getElementById('address-input').value = mockAddress;
            document.getElementById('detail-address').value = mockDetail;
            document.getElementById('latitude').value = mockLat;
            document.getElementById('longitude').value = mockLng;
            
            // 显示地址详情区域
            document.getElementById('address-details').style.display = 'block';
            
            // 模拟地图预览（实际项目中使用真实地图API）
            const staticMap = document.getElementById('static-map');
            staticMap.style.display = 'block';
            staticMap.src = `https://maps.googleapis.com/maps/api/staticmap?center=${mockLat},${mockLng}&zoom=16&size=600x300&maptype=roadmap&markers=color:red%7C${mockLat},${mockLng}&key=YOUR_API_KEY`;
            document.querySelector('#map-preview span').style.display = 'none';
        });
        
        // 动态显示/隐藏连续签到奖励设置
        document.getElementById('extra-reward').addEventListener('change', function() {
            console.log('连续签到奖励:', this.checked);
        });
    </script>
</body>
</html>